import React,{Component} from 'react';
import {Platform, StyleSheet, Text,ScrollView, View, TouchableOpacity, Alert,Image ,ImageBackground,Picker } from 'react-native';
import Swiper from 'react-native-swiper';

export default class CourseDetails extends Component{
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
	constructor(props){ 
		super(props);
		this.state ={ language:null, }; 
	}
    render(){
		return(
			<ScrollView style={styles.ScrollView}>
				<Swiper style={styles.swiperStyle} autoplay={true} autoplayTimeout={2.5}  height={170} horizontal={true} autolay={true} loop={true}
	                paginationStyle={{bottom:10}}
	                dotStyle={{backgroundColor:'rgba(0,0,0,.2)', width: 6, height: 6}}
	                activeDotStyle={{backgroundColor:'rgba(0,0,0,.5)', width: 6, height: 6}}>
	                <View style={styles.swiperItem}>
	                    <Image style={styles.imageStyle} source={require('../img/100.png')}></Image>
	                </View>
	                <View style={styles.swiperItem}>
	                    <Image style={styles.imageStyle} source={require('../img/13.jpg')}></Image>
	                </View>
	                <View style={styles.swiperItem}>
	                    <Image style={styles.imageStyle} source={require('../img/133.png')}></Image>
	                </View>
	                <View style={styles.swiperItem}>
	                    <Image style={styles.imageStyle} source={require('../img/100.png')}></Image>
	                </View>
	            </Swiper>
				
				<View style={styles.curriculum}>
                   <Text style={styles.curriculumTitle}> 今日课程表 </Text>
                   <View style={styles.table1}>
                   		<View style={styles.tableLeft}>
                   			<Text style={styles.tableText}> 上午 </Text>
                   		</View>
                   		<View style={styles.tableRight}>
                   			<Text style={styles.tableText}> 今日课程表 </Text>
                   		</View>
                   </View>
                   <View style={styles.table2}>
                   		<View style={styles.tableLeft}>
                   			<Text style={styles.tableText}> 下午 </Text>
                   		</View>
                   		<View style={styles.tableRight}>
                   			<Text style={styles.tableText}> 今日课程表 </Text>
                   		</View>
                   </View>
                </View>
                
                <View style={styles.signUp}>
                   <Text style={styles.signUpTitle}> 今日课程表 </Text>
                   <View style={styles.choice}>
                   		<View style={styles.choiceLeft}>
                   			<View style= {[styles.flex]}> 
								<Picker selectedValue= {this.state.language} onValueChange= {lang=> {this.setState( {language: lang})}} mode="dialog">
								 	<Picker.Item label='请选择地区' value='请选择地区'/>
								 	<Picker.Item label='呼和浩特' value='呼和浩特'/>
								 	<Picker.Item label='包头' value='包头'/>
								  	<Picker.Item label='东升' value='东升'/> 
								  	<Picker.Item label='集宁' value='集宁'/> 
								</Picker> 
							</View>
                   		</View>
                   		<View style={styles.choiceRight}>
                   			 <View style= {[styles.flex]}> 
								<Picker selectedValue= {this.state.language} onValueChange= {lang=> {this.setState( {language: lang})}} mode="dialog">
								 	<Picker.Item label='请选择地区' value='请选择地区'/>
								 	<Picker.Item label='呼和浩特' value='呼和浩特'/>
								 	<Picker.Item label='包头' value='包头'/>
								  	<Picker.Item label='东升' value='东升'/> 
								  	<Picker.Item label='集宁' value='集宁'/> 
								</Picker> 
							</View>
                   		</View>
                   </View>
                   <View style={styles.choice}>
                   		<View style={styles.choiceLeft}>
                   			<View style= {[styles.flex]}> 
								<Picker selectedValue= {this.state.language} onValueChange= {lang=> {this.setState( {language: lang})}} mode="dialog">
								 	<Picker.Item label='请选择地区' value='请选择地区'/>
								 	<Picker.Item label='呼和浩特' value='呼和浩特'/>
								 	<Picker.Item label='包头' value='包头'/>
								  	<Picker.Item label='东升' value='东升'/> 
								  	<Picker.Item label='集宁' value='集宁'/> 
								</Picker> 
							</View>
                   		</View>
                   		<View style={styles.choiceRight}>
                   			<View style= {[styles.flex]}> 
								<Picker selectedValue= {this.state.language} onValueChange= {lang=> {this.setState( {language: lang})}} mode="dialog">
								 	<Picker.Item label='请选择地区' value='请选择地区'/>
								 	<Picker.Item label='呼和浩特' value='呼和浩特'/>
								 	<Picker.Item label='包头' value='包头'/>
								  	<Picker.Item label='东升' value='东升'/> 
								  	<Picker.Item label='集宁' value='集宁'/> 
								</Picker> 
							</View>
                   		</View>
                   </View>
                </View>
				<View style={styles.boxs}>
					<View style={styles.box}>
						<View style={styles.boxing}>
							<Text style={styles.boxingTitle1}> 今日课 </Text>
							<Text style={styles.boxingTitle2}> 潘志伟 </Text>
							<Text style={styles.boxingTitle3}> 未报名 </Text>
						</View>
						<View style={styles.briefIntroduction}>
							<Text style={styles.briefIntroductionTitle}> 简介:爱打架开动脑筋总课时大娜迦 </Text>
						</View>
					</View>
					<View style={styles.box}>
						<View style={styles.boxing}>
							<Text style={styles.boxingTitle1}> 今日课 </Text>
							<Text style={styles.boxingTitle2}> 潘志伟 </Text>
							<Text style={styles.boxingTitle3}> 未报名 </Text>
						</View>
						<View style={styles.briefIntroduction}>
							<Text style={styles.briefIntroductionTitle}> 简介:爱打架开动脑筋总课时大娜迦 </Text>
						</View>
					</View>
					<View style={styles.box}>
						<View style={styles.boxing}>
							<Text style={styles.boxingTitle1}> 今日课 </Text>
							<Text style={styles.boxingTitle2}> 潘志伟 </Text>
							<Text style={styles.boxingTitle3}> 未报名 </Text>
						</View>
						<View style={styles.briefIntroduction}>
							<Text style={styles.briefIntroductionTitle}> 简介:爱打架开动脑筋总课时大娜迦 </Text>
						</View>
					</View>
					<View style={styles.box}>
						<View style={styles.boxing}>
							<Text style={styles.boxingTitle1}> 今日课 </Text>
							<Text style={styles.boxingTitle2}> 潘志伟 </Text>
							<Text style={styles.boxingTitle3}> 未报名 </Text>
						</View>
						<View style={styles.briefIntroduction}>
							<Text style={styles.briefIntroductionTitle}> 简介:爱打架开动脑筋总课时大娜迦 </Text>
						</View>
					</View>
					<View style={styles.box}>
						<View style={styles.boxing}>
							<Text style={styles.boxingTitle1}> 今日课 </Text>
							<Text style={styles.boxingTitle2}> 潘志伟 </Text>
							<Text style={styles.boxingTitle3}> 未报名 </Text>
						</View>
						<View style={styles.briefIntroduction}>
							<Text style={styles.briefIntroductionTitle}> 简介:爱打架开动脑筋总课时大娜迦 </Text>
						</View>
					</View>
				</View>
				
			</ScrollView>
		);
	}
}
//contain, cover, stretch, center, repeat.	 
const styles = StyleSheet.create({
	briefIntroductionTitle:{
		color:'#6B6B6B',fontSize: 14,
	},
	briefIntroduction:{
		backgroundColor: 'white',height:'50%',
	},
	boxingTitle1:{
		flex:2,color:'#313131',fontSize: 16,fontWeight:'bold',
	},
	boxingTitle2:{
		flex:2,color:'#666666',fontSize: 16,
	},
	boxingTitle3:{
		flex:2,textAlign: 'center',color:'#CE3C39',fontSize: 16,
	},
	boxing:{
		height:'50%',flexDirection:'row',
	},
	box:{
		height:60,borderBottomWidth:1,borderBottomColor: "#DFDFDF",paddingTop:8,
	},
	boxs:{
		padding:8,backgroundColor: 'white',margin:1,lineHeight: 20 ,
	},
	choice:{
		flexDirection:'row',height:40,
	},
	choiceLeft:{
		flex:1,justifyContent:'center',
	},
	choiceRight:{
		flex:1,justifyContent:'center',
	},
	signUp:{
    	backgroundColor:'white',height:130,marginTop:10,padding:8,
    },
	signUpTitle:{
		color:'black',fontSize: 18,paddingBottom:10,fontWeight:'bold',
	},
	
	tableText:{
		color:'#D25350',lineHeight: 50 ,fontSize: 18,textAlign: 'center',
	},
	table1:{
		flexDirection:'row',height:40,
		borderLeftWidth:1,borderLeftColor: "#D4D4D4",
		borderRightWidth:1,borderRightColor: "#D4D4D4",
		borderTopWidth:1,borderTopColor: "#D4D4D4"
	},
	table2:{
		flexDirection:'row',height:40,
		borderTopWidth:1,borderTopColor: "#D4D4D4",
		borderLeftWidth:1,borderLeftColor: "#D4D4D4",
		borderRightWidth:1,borderRightColor: "#D4D4D4",
		borderBottomWidth:1,borderBottomColor: "#D4D4D4"
	},
	tableLeft:{
		flex:1,justifyContent:'center',
	},
	tableRight:{
		flex:4,justifyContent:'center',borderLeftWidth:1,borderLeftColor: "#D4D4D4",
	},
	curriculumTitle:{
		color:'#D25350',fontSize: 18,paddingBottom:10,
	},
    curriculum:{
    	backgroundColor:'white',height:130,marginTop:10,padding:8,
    },
    swiperItem:{
        flex:1,justifyContent:'center',backgroundColor:'transparent',
    },
    imageStyle:{
        flex:1,height:'100%', width:'100%',
    },
	ScrollView:{
		backgroundColor:"#F2F2F2",
	},
	head:{
		flexDirection:'row',height:50, backgroundColor:"#D04542",
	},
	headTitle:{
		height:50,textAlign: 'center',fontSize: 18,
	  	fontWeight:'bold',lineHeight: 45 ,color: 'white',
	},
	headLetf:{
		flex:1,justifyContent:'center',margin:5,alignItems:'center',
	},
	headCenter:{
		flex:6,margin:5,
	},
	headRight:{
		flex:1,alignItems:'center',justifyContent:'center',margin:5,
	},
});
